<template>
  <div>
    <!-- 卡片区 -->
    <el-card>
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleOrgAdd">新增</el-button>
      <el-table :data="tableData" default-expand-all row-key="id" class="org_table" size="mini" stripe>
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="orgName" label="组织机构名称" align="left"></el-table-column>
        <el-table-column prop="status" label="状态" width="200" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 1" size="mini" type="">有效</el-tag>
            <el-tag v-if="scope.row.status === 0" size="mini" type="danger">无效</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template v-slot="scope">
            <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEditOrg(scope.row)">修改</el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDeleteOrg(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 修改dialog -->
    <el-dialog :visible.sync="orgEditDialog" title="修改" :show-close="false" width="30%" @close="orgEditClose">
      <el-form size="mini" label-width="100px" :model="orgForm" ref="orgForm">
        <el-form-item label="组织机构名称">
          <el-input v-model="orgForm.orgName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="orgForm.sort" type="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            style="display: block"
            v-model="orgForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="orgForm.address" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上级组织机构">
          <el-tree-select
            :elTreeProps="elTreeProps"
            :elTreeData="tableData"
            :defaultSelectedId="orgForm.parentId"
            :disabled="false"
            @handleTreeSelected="handleTreeSelected($event)"
            @validateSelectTree="validateSelectTree"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="orgEditDialog = false">取消</el-button>
        <el-button type="primary" size="mini" @click="handleOrgUpdate">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增dialog -->
    <el-dialog :visible.sync="orgAddDialog" title="新增" :show-close="false" width="30%" @close="orgAddClose">
      <el-form size="mini" label-width="100px" :model="orgForm" ref="orgForm">
        <el-form-item label="组织机构名称">
          <el-input v-model="orgForm.orgName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="orgForm.sort" type="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="orgForm.address" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="上级组织机构">
          <el-tree-select
            :elTreeProps="elTreeProps"
            :elTreeData="tableData"
            :defaultSelectedId="orgForm.parentId"
            :disabled="false"
            @handleTreeSelected="handleTreeSelected($event)"
            @validateSelectTree="validateSelectTree"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="orgAddDialog = false">取消</el-button>
        <el-button type="primary" size="mini" @click="handleAddOrg">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ElTreeSelect from '@/components/TreeSelect'
import { mapActions } from 'vuex'
export default {
  components: {
    ElTreeSelect
  },
  data() {
    return {
      tableData: [],
      orgEditDialog: false,
      orgAddDialog: false,
      orgForm: {
        id: null,
        parentId: null,
        orgName: '',
        sort: 0,
        status: 1,
        address: '',
      },
      elTreeProps: {// el-tree-select配置项（必选）
        value: 'id',
        label: 'orgName',
        children: 'children',
      }
    }
  },
  async mounted() {
    this.flush()
  },
  methods: {
    ...mapActions('org', ['orgTree', 'addOrg', 'updateOrg', 'deleteOrg']),
    //关闭修改dialog
    orgEditClose() {
      //清空form的值
      this.orgForm = {}
    },
    //弹出修改dialog
    handleEditOrg(row) {
      this.orgEditDialog = true
      this.orgForm = row
    },
    //保存修改
    async handleOrgUpdate() {
      const res = await this.updateOrg(this.orgForm)
      if (res.code === 0) {
        this.flush()
        this.orgEditDialog = false
        this.$message.success('修改成功')
      }
    },
    //删除组织机构
    handleDeleteOrg(id) {
      this.$confirm('此操作将永久删除，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.deleteOrg(id)
        if (res.code === 0) {
          this.flush()
          this.orgEditDialog = false
          this.$message.success('删除成功')
        }
      }).catch(() => { });
    },
    //显示机构新增dialog
    handleOrgAdd() {
      this.orgAddDialog = true
    },
    //关闭新增dialog
    orgAddClose() {
      //清空form的值
      this.orgForm = {}
    },
    //新增组织机构
    async handleAddOrg() {
      console.log(this.orgForm)
      const res = await this.addOrg(this.orgForm)
      if (res.code === 0) {
        this.flush()
        this.orgAddDialog = false
        this.$message.success('新增成功')
      }
    },
    handleTreeSelected(value) {
      this.orgForm.parentId = value
      this.$refs.orgForm.validateField("parentId");
    },
    validateSelectTree() {
      this.$refs.orgForm.validateField("parentId");
    },
    //刷新界面
    async flush() {
      const res = await this.orgTree()
      this.tableData = res.data
    }
  }
}
</script>

<style>
.org_table {
  margin: 10px 0;
}
.el-switch {
  margin-top: 3.3px;
}
</style>
